<template>
  <div class="loading-box on-top w-full h-full z-1000 bg-cover bg-black">
    <div
      v-if="process === 'error'"
      class="error-pos cursor-pointer z-10 absolute bottom-35px w-520px h-90px"
      @click="reset"
    >
      <div class="relative w-full h-full reconnect">
      </div>
    </div>
    <div
      v-else
      class="loading-bar absolute bottom-0px w-full left-0 z-10 px-50px"
    >
      <div class="text-50px text-right text-white font-bold mb-20px">{{ percentage }}%</div>
      <div class="flex justify-between items-end">
        <div class="overflow-hidden flex-1">
          <div class="text-black text-12px font-bold mb-10px">LOADING...</div>
          <div
            class="flex overflow-hidden"
            :style="{ 'width': `${percentage}%` }"
          >
            <div
              v-for="item in ROUND_NUMBER"
              :key="item"
              class="flex"
            >
              <div class="w-20px h-3px bg-white opacity-20 mr-2px"></div>
              <div class="w-3px h-3px bg-white mr-2px"></div>
              <div class="w-3px h-3px bg-white mr-2px opacity-20"></div>
              <div class="w-20px h-3px bg-white opacity-10 mr-2px"></div>
              <div class="w-9px h-3px bg-white mr-2px opacity-20"></div>
              <div class="w-20px h-3px bg-white mr-2px"></div>
              <div class="w-3px h-3px bg-white mr-2px opacity-20"></div>
              <div class="w-3px h-3px bg-white mr-2px"></div>
              <div class="w-20px h-3px bg-white opacity-10"></div>
              <div class="w-9px h-3px bg-white mr-2px"></div>
            </div>
          </div>
        </div>
        <div
          class="w-190px h-21px ml-20px"
          :class="{ highlight: percentage >= HIGH_LIGHT }"
        >
          <!-- 图片位置 -->
          <img src="@/assets/icons/pc/loading-xmov.png" />
        </div>
      </div>
    </div>
    <Swiper
      class="x-swiper w-full h-full"
      :autoplay="{ delay: DELAY_TIME, disableOnInteraction: false }"
      :pagination="{ clickable: true }"
    >
      <swiper-slide
        v-for="x in swiper.list"
        :key="x.id"
        class="x-swiper-item w-full h-full"
      >
        <!-- 秒表动效特殊定制 -->
        <img
          src="@/assets/apng/loading-time.png"
          class="absolute w-full h-full object-cover"
        />
        <img
          :src="x.url"
          class="w-full h-full object-cover"
        />
      </swiper-slide>
    </Swiper>
  </div>
</template>

<script
  lang="ts"
  setup
  name="LoadingPage"
>
import useLoading from './hook'

const { process, swiper, percentage, reset } = useLoading(true)
const HIGH_LIGHT = 98 // 图片高亮值
const DELAY_TIME = 3000
const ROUND_NUMBER = 10
</script>

<style scoped lang="scss">
@keyframes scaleAnimation {
  0% {
    transform: scale(0.1);
    opacity: 0.0;
  }

  25% {
    transform: scale(0.3);
    opacity: 0.25;
  }

  50% {
    transform: scale(0.5);
    opacity: 0.5;
  }

  75% {
    transform: scale(0.8);
    opacity: 0.75;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.error-pos {
  margin-left: -243.5px;
  left: 50%;
  animation: scaleAnimation 0.5s ease-out;

  .reconnect {
    background: url('@/assets/images/pc/reconnect.png') no-repeat;
    background-size: contain;

    &:hover {
      background-image: url('@/assets/images/pc/reconnect-hover.png');
    }
  }
}

.highlight {
  -webkit-filter: brightness(500%);
  filter: brightness(500%);
}



.loading-bar-pc {
  @apply backdrop-filter backdrop-blur-2px px-40px absolute;
  background: rgba(255, 255, 255, 0.1);
  animation: scaleAnimation 0.5s ease-out;
  left: 50%;
  margin-left: -440px;
  // margin-top: -48px;
}

.loading-bar {

  height: 195px;
  padding-top: 62px;

  &::before {
    @apply absolute w-full h-full left-0;
    content: '';
    background: linear-gradient(180deg, rgba(103, 148, 183, 0) 0%, #526F82 100%);
    opacity: 0.38;
  }
}
</style>
